const  {createApp} = Vue;
const app = createApp({
    data() {
        return {
          searchHero: '',
          isSearch: false,
          heroes: [],
          types: [
            { name: '全部', value: '0' },
            { name: '坦克', value: '3' },
            { name: '战士', value: '1' },
            { name: '刺客', value: '4' },
            { name: '法师', value: '2' },
            { name: '射手', value: '5' },
            { name: '辅助', value: '6' },
          ],
          query: {
            type: 'dingwei',
            value: 0,
          },
          checked: 0,
        }
      },
      methods: {
        async getHeroLists() {
          //获取英雄数据
          const { data } = await axios.get(
            'http://project.x-zd.net:3001/apis/herolist'
          )
          this.heroes = data.data
          console.log(this.heroes)
        },
        changeType(type, value) {
          this.query.type = type
          this.query.value = value
          this.checked = value
          this.searchHero = ''
        },
      },
      mounted() {
        this.getHeroLists()
      },
      computed: {
        heroPick() {
          const { type, value } = this.query
          console.log(type, value)
          if (this.searchHero) {
            let res = this.heroes.filter((hero) =>
              hero.cname.includes(this.searchHero)
            )
            res = _.cloneDeep(res)
            return res.map((item) => {
              item.cname = item.cname.replace(
                this.searchHero,
                `<span style="color:red">${this.searchHero}</span>`
              )
              return item
            })
          } else if (type == 'zonghe') {
            return this.heroes.filter((hero) => hero.pay_type == value)
          } else if (type == 'dingwei') {
            if (value == 0) {
              return this.heroes
            } else {
              return this.heroes.filter(
                (hero) => hero.hero_type == value || hero.hero_type2 == value
              )
            }
          }
        },
      },
})
app.mount('#app')